import { useAPIUtils } from "@/components/APIUtilsProvider";
import PageLayout from "@/components/PageLayout";
import {
  Button,
  Divider,
  Text,
  Flex,
  Box,
  Grid,
  Select,
  Paper,
  Table,
  Title,
  Group,
} from "@mantine/core";
import { DateTimePicker } from "@mantine/dates";
import UserPill from "@/components/UserPill";
import { useForm } from "@mantine/form";
import { IconFileChart } from "@tabler/icons-react";
import dayjs from "dayjs";
import { useState } from "react";

export default function GlobalData() {
  const {
    restGET,
    tanstackQuery,
    tanstackInvalidate,
    restPOST,
    restPUT,
    restDELETE,
  } = useAPIUtils();

  const initialValues = {
    start: dayjs().startOf("year").toDate(),
    end: new Date(),
  };

  const [range, setRange] = useState(initialValues);

  const query = tanstackQuery("/api/admin/orders/manager/gain", {
    ...range,
  });

  const searchForm = useForm({
    mode: "uncontrolled",
    initialValues,
    validate: {},
  });

  const formValues = searchForm.values;

  return (
    <PageLayout title={"合营随单收益"}>
      <form>
        <Flex
          mih={50}
          mb={44}
          gap="md"
          justify="flex-start"
          align="flex-end"
          direction="row"
          wrap="wrap"
        >
          <DateTimePicker
            description="时间开始"
            {...searchForm.getInputProps("start")}
            valueFormat="YYYY/MM/DD HH:mm"
            w={200}
          />
          <DateTimePicker
            description="时间结束"
            {...searchForm.getInputProps("end")}
            valueFormat="YYYY/MM/DD HH:mm"
            w={200}
          />

          <Button
            onClick={() =>
              setRange({
                start: dayjs(formValues.start).format("YYYY-MM-DDTHH:mm:ss"),
                end: dayjs(formValues.end).format("YYYY-MM-DDTHH:mm:ss"),
              })
            }
          >
            查询
          </Button>
        </Flex>
      </form>
      {query.data && <Display data={query.data} />}
    </PageLayout>
  );
}

const Display = ({ data }) => {
  const rows = data.map((item, index) => (
    <Table.Tr key={index}>
      <Table.Td>
        <Text>{index + 1}</Text>
      </Table.Td>
      <Table.Td>
        <UserPill userId={item.ownerId}></UserPill>
      </Table.Td>

      <Table.Td>
        <Text>{item.typeText}</Text>
      </Table.Td>
      <Table.Td>
        <Text>{item.orderCount}</Text>
      </Table.Td>
      <Table.Td>
        <Text>{item.amount}</Text>
      </Table.Td>
      <Table.Td>
        <Text>{item.amountAsCash}</Text>
      </Table.Td>
    </Table.Tr>
  ));
  return (
    <Paper p={"md"}>
      <Table verticalSpacing={"sm"}>
        <Table.Thead>
          <Table.Tr>
            <Table.Th w={"3%"}></Table.Th>
            <Table.Th w={"10%"}>合营店铺</Table.Th>
            <Table.Th w={"20%"}>收益类型</Table.Th>
            <Table.Th w={"20%"}>相关单数</Table.Th>
            <Table.Th w={"10%"}>收益积分</Table.Th>
            <Table.Th w={"10%"}>对应金额</Table.Th>
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>{rows}</Table.Tbody>
      </Table>
    </Paper>
  );
};
